<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core">

    <f:view contentType="text/html" renderKitId="PRIMEFACES_MOBILE">
        <h:head>
            <title>Genie Pedidos/title>
            <meta name="viewport" content="width=device-width, user-scalable=no"/>
            <h:outputStylesheet library="css" name="estilo_celular.css" />
            <h:outputStylesheet library="css" name="font-awesome.min.css" />
            <link rel="icon" href="#{request.contextPath}/diGabriel/_img/logo.png" type="image/ico" />
            <f:metadata>
                <f:viewParam name="mesa" value="#{pedidoMB.parametro}" />
            </f:metadata>
        </h:head>

        <h:body>
            <h:form id="form-channel">
                <p:socket channel="/#{pedidoMB.idMesa}">
                    <p:ajax event="message" process="@this" update=":formHistorico :formBotaoCancelarPedido"/>
                </p:socket>
            </h:form>

            <!-- COMPONENTES EXTERNOS A PÁGINA -->
            <h:form>
                <p:remoteCommand name="avancaCategoria" actionListener="#{pedidoMB.mudaCategoria(1)}" process="@this" update=":form1 :form2"/>
                <p:remoteCommand name="voltaCategoria" actionListener="#{pedidoMB.mudaCategoria(-1)}" process="@this" update=":form1 :form2"/>
            </h:form>
            <!-- FIM COMPONENTES EXTERNOS A PÁGINA -->

            <!-- DIALOGS -->
            <h:form id="formDialog">
                <p:growl id="growl" for="default" showDetail="false" autoUpdate="false" sticky="false" life="3000"/>
                <p:growl id="growlMenor" for="msgMenor" showDetail="false" autoUpdate="false" sticky="false" life="1800"/>
                <p:growl id="growlMaior" for="msgMaior" showDetail="false" autoUpdate="false" sticky="false" life="5000"/>

                <p:dialog widgetVar="dialog-confirma-cancelar"
                          id="confirma-cancelar"
                          header="OK?"
                          draggable="false"
                          resizable="false"
                          style="text-align: center !important;">
                    <h:outputText id="txtConfirma" value="Tem certeza que deseja cancelar este pedido?" styleClass="textoDialog"/>
                    <br/>
                    <br/>

                    <span>
                        <p:commandButton id="btn-cancela-sim" value="Sim"
                                         actionListener="#{pedidoMB.cancelaPedidoFeito()}"
                                         process="@this"
                                         update=":formDialog:growl :formHistorico"
                                         onclick="PF('dialog-confirma-cancelar').hide();
                                                     voltarDetalhe();"/>
                        <br/>
                        <p:commandButton id="btn-cancela-nao" value="Não" onclick="PF('dialog-confirma-cancelar').hide();"/>
                    </span>
                </p:dialog>

                <p:dialog widgetVar="dialog-fechar-conta"
                          id="fechar-conta"
                          header="OK?"
                          draggable="false"
                          resizable="false"
                          style="text-align: center !important;">
                    <h:form>
                        <h:outputText id="txtConta" value="Tem certeza que deseja pedir a conta?" styleClass="textoDialog"/>
                        <br/>
                        <br/>

                        <span>
                            <p:commandButton id="btn-conta-sim" value="Sim"
                                             actionListener="#{pedidoMB.fechaConta()}" process="@this" update=":formDialog:growl :formDialog:growlMaior :formHistorico"
                                             oncomplete="PF('dialog-fechar-conta').hide();"/>
                            <br/>
                            <p:commandButton id="btn-conta-nao" value="Não" onclick="PF('dialog-fechar-conta').hide();"/>
                        </span>
                    </h:form>
                </p:dialog>
            </h:form>

            <!-- FIM DIALOGS -->

            <!-- NAVEGAÇÃO -->
            <div id="div-fundo">

                <div id="div-fixo">

                    <div id="div-topo">
                        <span id="span-cardapio" class="fa fa-cutlery nav-ativo cardapio"></span>
                        <span id="span-historico" class="fa fa-history nav-inativo"></span>
                        <span id="span-carrinho" class="fa fa-shopping-cart nav-inativo carrinho"></span>
                    </div>

                    <div id="div-logo" class="cardapio">
                        <img src="_img/logo.png"/>
                    </div>

                    <h:form id="formQtdCar">
                        <div id="div-numero" class="num-car carrinho" style="#{pedidoMB.mostrarQtdPedidoCarrinho()}">
                            #{pedidoMB.produtosSelecionados.size()}
                        </div>
                    </h:form>

                    <!-- CATEGORIAS -->

                    <div id="categoria">
                        <h:form id="form1">
                            <span id="span-seta-voltar" class="fa fa-chevron-left"/>

                            <span id="span-cat-texto">
                                <p id="txtCat" class="p-cat">#{pedidoMB.categoriaAtual.nome}</p>
                            </span>

                            <span id="span-seta-avancar" class="fa fa-chevron-right"/>
                        </h:form>
                    </div>

                    <div id="titulo-carrinho" class="display-none">
                        <span id="span-titulo-carrinho">
                            <p id="txtTituloCar" class="p-cat">Meu Carrinho</p>
                        </span>
                    </div>

                    <div id="titulo-historico" class="display-none">
                        <span id="span-titulo-historico">
                            <p id="txtTituloHis" class="p-cat">Histórico de Pedidos</p>
                        </span>
                    </div>

                    <div id="titulo-historico-detalhe" class="display-none">
                        <span id="span-titulo-historico-detalhe">
                            <p id="txtTituloHisDet" class="p-cat">Detalhes do Pedido</p>
                        </span>
                    </div>

                    <div id="titulo-produto-detalhe" class="display-none">
                        <span id="span-titulo-produto-detalhe" style="border:none;">
                            <p id="txtTituloProdDet" class="p-cat">Detalhes do Produto</p>
                        </span>
                    </div>

                </div>

                <!-- LISTA DE PRODUTOS -->

                <div id="div-lista-produtos" class="lista-produtos" style="height: 100%;">
                    <h:form id="form2">
                        <p:dataList id="listProdutos" rows="30" value="#{pedidoMB.listaProdutosPorCategoria}" var="produto" 
                                    rowIndexVar="#{produto.id}" paginatorTemplate="{PreviousPageLink} {CurrentPageReport} {NextPageLink} {RowsPerPageDropdown}"
                                    rowsPerPageTemplate="5">
                            <p:commandLink action="#{pedidoMB.exibeDetalheProdutoASerAdicionado(produto)}"
                                           ajax="true" update=":formProdutoDetalhe"
                                           onclick="mostrarProdutoDetalhe()" styleClass="linkHistorico">

                                <h2>#{produto.nome}</h2>
                                <p class="pDescricao">#{produto.descricao}</p>

                                <span class="ui-li-aside">
                                    <p><strong>#{produto.getPrecoMonetario()}</strong></p>
                                </span>

                            </p:commandLink>
                        </p:dataList>
                    </h:form>
                </div>

                <!-- LISTA DE PRODUTOS DETALHE -->

                <div id="div-lista-produto-detalhe" class="lista-produtos display-none">

                    <div id="div-prodDetalhe-topo">
                        <span class="span-detalhe-voltar" style="left: 0;">
                            <h:form>
                                <p:commandButton value="" onclick="voltarProduto()"
                                                 style="font-family: FontAwesome" 
                                                 styleClass="fa fa-arrow-left commandVoltar"/>
                            </h:form>
                        </span>
                    </div>

                    <span class="span-detalhe-lista">
                        <h:form id="formProdutoDetalhe">

                            <span class="span-produto-detalhe-produto">
                                #{pedidoMB.produtoSelecionado.nome}
                            </span>

                            <span class="span-produto-detalhe-descricao">
                                #{pedidoMB.produtoSelecionado.descricao}
                            </span>

                            <span class="span-produto-detalhe-select">
                                <p>Selecione a quantidade:</p>
                                <p:selectOneMenu id="selectQtdProduto" value="#{pedidoMB.produtoSelecionado.quantidadeVenda}">
                                    <f:selectItem itemLabel="0" itemValue="0" />
                                    <f:selectItem itemLabel="1" itemValue="1" />
                                    <f:selectItem itemLabel="2" itemValue="2" />
                                    <f:selectItem itemLabel="3" itemValue="3" />
                                    <f:selectItem itemLabel="4" itemValue="4" />
                                    <f:selectItem itemLabel="5" itemValue="5" />
                                    <f:selectItem itemLabel="6" itemValue="6" />
                                    <f:selectItem itemLabel="7" itemValue="7" />
                                    <f:selectItem itemLabel="8" itemValue="8" />
                                    <f:selectItem itemLabel="9" itemValue="9" />
                                    <f:selectItem itemLabel="10" itemValue="10" />
                                </p:selectOneMenu>

                            </span>

                            <span class="span-produto-detalhe-adicionar">
                                <p:commandButton id="btnAdicionarCarrinho" value="Adicionar&#10;Carrinho"
                                                 action="#{pedidoMB.adicionaProdutoNaListaProdSelec()}"
                                                 styleClass="commandAdicionar"
                                                 ajax="true" update=":formDialog:growlMenor :formCarrinho :formQtdCar"
                                                 onclick="voltarProduto()">
                                </p:commandButton>
                            </span>

                        </h:form>
                    </span>
                </div>

                <!-- CARRINHO -->

                <div id="div-lista-carrinho" class="lista-produtos display-none">
                    <h:form id="formCarrinho">
                        <div class="msg-lista-vazia" style="#{pedidoMB.mostrarMensagemCarrinho()}">
                            <p>Seu carrinho está vazio! :(</p>
                        </div>

                        <p:dataList id="lista-pedido-carrinho" value="#{pedidoMB.exibirProdutosSelecionadosCarrinho()}" var="produtoCarrinho">

                            <h2>#{produtoCarrinho.quantidadeVenda} X #{produtoCarrinho.nome}</h2>
                            <p class="pDescricao">Unit. #{produtoCarrinho.getPrecoMonetario()}</p>

                            <p class="totalCarrinho">TOTAL: #{produtoCarrinho.getPrecoMonetarioVarios()}</p>

                            <span id="botao-remover">
                                <p:commandLink value="Remover" styleClass="link-remover"
                                               action="#{pedidoMB.removeProdutoCarrinho(produtoCarrinho)}"
                                               ajax="true" update=":formCarrinho :formQtdCar">
                                </p:commandLink>
                            </span>

                            <div id="div-finalizar-pedido">
                                <span id="span-total" style="z-index: 999;">Total:</span>
                                <span id="span-total-valor" style="z-index: 999;"> #{pedidoMB.valorPedidoMonetario()}</span>
                                <p:commandButton id="btn-finalizar-pedido" value="CONCLUIR PEDIDO" styleClass="cBtn-finalizar-pedido"
                                                 actionListener="#{pedidoMB.cadastraPedidoQuantidadeProdutos()}" style="z-index: 999;"
                                                 update=":form-channel :formDialog:growlMenor :formCarrinho :formQtdCar :formHistorico"
                                                 onclick="concluirPedido()">
                                </p:commandButton>
                            </div>

                        </p:dataList>
                    </h:form>
                    <br/>
                    <p style="color:white;">.</p>
                </div>

                <!-- HISTÓRICO -->

                <div id="div-lista-historico" class="lista-produtos display-none">
                    <h:form id="formHistorico">
                        <p:dataList id="lista-pedido-historico" value="#{pedidoMB.getListaPedidos(pedidoMB.idMesa)}" var="pedido">
                            <p:commandLink action="#{pedidoMB.exibeDetalhesPedido(pedido)}"
                                           ajax="true" update=":formBotaoCancelarPedido :formHistoricoDetalhe"
                                           onclick="mostrarDetalhe()" styleClass="linkHistorico">
                                <h2>Pedido: #{pedido.numeroPedido}</h2>
                                <p>Status: #{pedido.status}</p>
                                <p class="ui-li-aside"><strong>R$: #{pedido.totalFormatado}
                                    </strong></p>
                            </p:commandLink>

                            <div id="div-pedir-conta">
                                <span id="span-total-conta">Total:</span>
                                <span id="span-total-valor-conta">#{mesaMB.valorTotalConta(pedidoMB.idMesa)}</span>
                                <p:commandButton id="btn-pedir-conta" value="PEDIR A CONTA" styleClass="cBtn-finalizar-pedido"
                                                 disabled="#{pedidoMB.disableBotaoConta()}"
                                                 onclick="PF('dialog-fechar-conta').show();">
                                </p:commandButton>
                            </div>
                        </p:dataList>
                    </h:form>
                    <br/>
                    <p style="color:white;">.</p>
                </div>

                <!-- HISTÓRICO DETALHE -->

                <div id="div-lista-historico-detalhe" class="lista-produtos display-none">
                    <div id="div-hisDetalhe-topo">
                        <span class="span-detalhe-voltar" style="left: 0;">
                            <h:form>
                                <p:commandButton value="" onclick="voltarDetalhe()"
                                                 style="font-family: FontAwesome" 
                                                 styleClass="fa fa-arrow-left commandVoltar"/>
                            </h:form>
                        </span>

                        <h:form id="formBotaoCancelarPedido">
                            <span class="span-hisDetalhe-cancelar" style="right: 0">
                                <p:commandButton value="Cancelar&#10;Pedido"
                                                 onclick="PF('dialog-confirma-cancelar').show();"
                                                 rendered="#{pedidoMB.verificaStatusPedidoEmDetalhe()}"
                                                 styleClass="commandCancelar"/>
                            </span>
                        </h:form>
                    </div>

                    <span class="span-detalhe-lista">
                        <h:form id="formHistoricoDetalhe">
                            <p:dataList id="lista-pedido-historicoDetalhe"
                                        value="#{pedidoMB.listaProdutosPedidos}"
                                        var="pedidoDetalhe"
                                        style="margin-top: 40px;">

                                <h2>#{pedidoDetalhe.quantidadeVenda} X #{pedidoDetalhe.nome}</h2>
                                <p>Unit. #{pedidoDetalhe.getPrecoMonetario()}</p>

                                <p class="ui-li-aside"><strong>#{pedidoDetalhe.getPrecoMonetarioVarios()}</strong></p>

                            </p:dataList>
                        </h:form>
                    </span>
                </div>

            </div>

            <!-- ARQUIVOS JS COLOCADOS NO FINAL PARA UM CARREGAMENTO MAIS RÁPIDO DA PÁGINA -->
            <script src="_js/main.js"></script>
        </h:body>
    </f:view>
</html>
